<template>
  <FullscreenCard class="wrapper">
		<div class="grid" ref="charDom"></div>
	</FullscreenCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import FullscreenCard from '@/components/FullscreenCard'

const charDom = ref<any>(null)

const dataList = [{
  id: '1',
  name: '密度',
  data: [500, 900, 1100, 1300, 1500, 2200]
},{
  id: '2',
  name: '漏斗',
  data: [600, 1000, 1200, 1400, 1600, 2400]
},{
  id: '3',
  name: '初切',
  data: [400, 800, 1000, 1200, 1400, 2000]
},{
  id: '4',
  name: '终切',
  data: [300, 700, 1300, 1500, 1700, 2600]
},{
  id: '5',
  name: '塑性',
  data: [100, 400, 600, 1100, 1200, 2100]
}]
    

const initChart = () => {
  const myChart = echarts.init(charDom.value)
  const option =  {
    tooltip: {
      trigger: 'all'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      // 分割线
      splitLine: { show: false },
      // 坐标轴线
      axisLine: { show: false },
      // 刻度线
      axisTick: { show: false },
      splitArea: {
        interval: 0,
        show: true
      },
      data: dataList.map(v => ({
        value: v.name,
        textStyle: {
          align: 'center'
        }
      }))
    },
    yAxis: {
      name: '井深/m',
      type: 'value',
      offset: 0,
      inverse: true,
      min: 0,
      maxInterval: 400,
      axisLabel: {
        formatter: '{value}'
      },
      // 分割线
      splitLine: { 
        show: true,
        lineStyle: {
          type: 'dashed' 
        }
      },
      // 坐标轴线
      axisLine: { show: true },
      // 刻度线
      axisTick: { show: false },
    },
    series: [
      ...dataList.map(v => ({
        name: v.name,
        type: 'line',
        data: v.data,
      }))
    ],
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
	background-color: var(--vt-c-white);
}
.grid {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.grid-popover {
  position: absolute; 
  right: 200px; 
  top: 60px;
  z-index: 3000;
  background-color: #fff;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  padding: 12px;
}
</style>
